<template>
  <div class="dictionary">
    <a-select
      v-model="value"
      :placeholder="placeholder || '请选择' + code"
      :disabled="disabled"
      @change="
        (val) => {
          emit('update:value', val);
          emit('change', val);
        }
      "
    >
      <a-option
        v-for="item in dictionaryStore.dictionary[dictionaryItem?.type || 0]"
        :key="item"
        :value="item.id"
      >
        {{ item.name }}
      </a-option>
    </a-select>
    <a-button @click="visible = true" v-if="!disabled">
      <template #icon>
        <icon-plus />
      </template>
    </a-button>
  </div>
  <a-modal :title="code + '字典管理'" v-model:visible="visible">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <div>
      <a-button
        style="margin-top: -10px; margin-bottom: 10px"
        @click="
          () => {
            formData.name = '';
            visible2 = true;
          }
        "
      >
        新增字典
        <template #icon>
          <icon-plus />
        </template>
      </a-button>
    </div>
    <a-table
      :pagination="false"
      :data="dictionaryStore.dictionary[dictionaryItem?.type || 0]"
    >
      <template #columns>
        <a-table-column title="名称" :width="200" data-index="name" />
        <a-table-column title="操作" :width="100">
          <template #cell="{ record }">
            <a-space>
              <a-button
                @click="
                  () => {
                    Object.assign(formData, record);
                    visible2 = true;
                  }
                "
              >
                <template #icon>
                  <icon-edit />
                </template>
              </a-button>

              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="dictionaryStore.del(record.id, dictionaryItem?.type || 0)"
              >
                <a-button>
                  <template #icon>
                    <icon-delete />
                  </template>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-modal :title="formData.id ? '修改' : '新增'" v-model:visible="visible2">
      <template #footer>
        <a-space>
          <a-button type="primary" @click="handleOk">确定</a-button>
          <a-button @click="visible2 = false">取消</a-button>
        </a-space>
      </template>
      <a-form :model="formData" ref="refForm" auto-label-width>
        <a-form-item
          label="名称"
          field="name"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-input placeholder="请输入名称" v-model="formData.name" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick, watch } from 'vue';
  import { useDictionaryStore, dictionaryList } from '@/store/dictionary';

  let dictionaryStore = useDictionaryStore();

  let props = withDefaults(
    defineProps<{
      value: any;
      code: string;
      disabled?: boolean;
      placeholder?: string;
    }>(),
    {
      disabled: false,
      placeholder: '',
    }
  );
  let emit = defineEmits(['update:value', 'change']);

  let dictionaryItem = dictionaryList.find(({ code }) => code === props.code);

  let loadData = async () => {
    if (!dictionaryStore.dictionary[dictionaryItem?.type || 0]) {
      await dictionaryStore.getOption(dictionaryItem?.type || 0);
    }
  };
  loadData();

  let visible = ref(false);
  let formData = reactive<any>({});
  let visible2 = ref(false);
  let refForm = ref();
  let handleOk = async () => {
    if (await refForm.value.validate()) return;
    dictionaryStore.addOrEdit({
      ...formData,
      type: dictionaryItem?.type,
    });
    visible2.value = false;
  };
  defineExpose({
    option: dictionaryStore.dictionary[dictionaryItem?.type || 0] || [],
  });
</script>

<style scoped>
  .dictionary {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
</style>
